<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>YsSvgIcon 引入svg图标 | YS-UI组件库</title>
    <meta name="description" content="一个基于element-plus二次开发的组件库">
    <meta name="generator" content="VitePress v1.3.1">
    <link rel="preload stylesheet" href="/ys-ui-docs/assets/style.CbCYZkHw.css" as="style">
    
    <script type="module" src="/ys-ui-docs/assets/app.DW3qKtlZ.js"></script>
    <link rel="preload" href="/ys-ui-docs/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/ys-ui-docs/assets/chunks/framework.B0Wylto7.js">
    <link rel="modulepreload" href="/ys-ui-docs/assets/chunks/theme.COWShTC0.js">
    <link rel="modulepreload" href="/ys-ui-docs/assets/component_YsSvgIcon_YsSvgIcon.md.DaTqiJvi.lean.js">
    <link rel="icon" href="/ys-ui-docs/icon/favicon.svg">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-a0352b35><!--[--><!--]--><!--[--><span tabindex="-1" data-v-d516c031></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-d516c031> Skip to content </a><!--]--><!----><header class="VPNav" data-v-a0352b35 data-v-2948d582><div class="VPNavBar" data-v-2948d582 data-v-053f8ba1><div class="wrapper" data-v-053f8ba1><div class="container" data-v-053f8ba1><div class="title" data-v-053f8ba1><div class="VPNavBarTitle has-sidebar" data-v-053f8ba1 data-v-2e986e46><a class="title" href="/ys-ui-docs/" data-v-2e986e46><!--[--><!--]--><!--[--><img class="VPImage logo" src="/ys-ui-docs/icon/logo.svg" alt data-v-5bd4ac25><!--]--><span data-v-2e986e46>YS-UI</span><!--[--><!--]--></a></div></div><div class="content" data-v-053f8ba1><div class="content-body" data-v-053f8ba1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-053f8ba1><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-053f8ba1 data-v-d75df9b8><span id="main-nav-aria-label" class="visually-hidden" data-v-d75df9b8> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/ys-ui-docs/guide/installation.html" tabindex="0" data-v-d75df9b8 data-v-696491c2><!--[--><span data-v-696491c2>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/ys-ui-docs/component/YsPagination/YsPagination.html" tabindex="0" data-v-d75df9b8 data-v-696491c2><!--[--><span data-v-696491c2>组件</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-053f8ba1 data-v-1385708f><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-1385708f data-v-cd700187 data-v-0542135f><span class="check" data-v-0542135f><span class="icon" data-v-0542135f><!--[--><span class="vpi-sun sun" data-v-cd700187></span><span class="vpi-moon moon" data-v-cd700187></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-053f8ba1 data-v-15410dc2 data-v-efb9280c><!--[--><a class="VPSocialLink no-icon" href="https://github.com/zhaoxianzhao/ys-ui-docs" aria-label="github" target="_blank" rel="noopener" data-v-efb9280c data-v-a202b471><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="mailto:zhaoxianchao@elements.org.cn" aria-label="邮箱" target="_blank" rel="noopener" data-v-efb9280c data-v-a202b471><svg t="1689921738475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2563" width="200" height="200"><path d="M512 62.584C263.8 62.584 62.584 263.8 62.584 512S263.8 961.416 512 961.416 961.416 760.2 961.416 512 760.2 62.584 512 62.584z m232.022 584.767c0 24.81-20.876 45.112-46.4 45.112H326.377c-25.523 0-46.4-20.301-46.4-45.112l0.213-222.877 226.25 119.983a11.907 11.907 0 0 0 11.12 0l226.462-120.096v222.99z m-231.91-145.259L280.216 376.237c0.225-24.624 20.788-44.7 46.162-44.7h371.246c25.336 0 46.1 20.001 46.4 44.575l-231.91 125.98z" p-id="2564"></path></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-053f8ba1 data-v-53255e31 data-v-cf96e6d2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf96e6d2><span class="vpi-more-horizontal icon" data-v-cf96e6d2></span></button><div class="menu" data-v-cf96e6d2><div class="VPMenu" data-v-cf96e6d2 data-v-37a0fd49><!----><!--[--><!--[--><!----><div class="group" data-v-53255e31><div class="item appearance" data-v-53255e31><p class="label" data-v-53255e31>Appearance</p><div class="appearance-action" data-v-53255e31><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-53255e31 data-v-cd700187 data-v-0542135f><span class="check" data-v-0542135f><span class="icon" data-v-0542135f><!--[--><span class="vpi-sun sun" data-v-cd700187></span><span class="vpi-moon moon" data-v-cd700187></span><!--]--></span></span></button></div></div></div><div class="group" data-v-53255e31><div class="item social-links" data-v-53255e31><div class="VPSocialLinks social-links-list" data-v-53255e31 data-v-efb9280c><!--[--><a class="VPSocialLink no-icon" href="https://github.com/zhaoxianzhao/ys-ui-docs" aria-label="github" target="_blank" rel="noopener" data-v-efb9280c data-v-a202b471><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="mailto:zhaoxianchao@elements.org.cn" aria-label="邮箱" target="_blank" rel="noopener" data-v-efb9280c data-v-a202b471><svg t="1689921738475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2563" width="200" height="200"><path d="M512 62.584C263.8 62.584 62.584 263.8 62.584 512S263.8 961.416 512 961.416 961.416 760.2 961.416 512 760.2 62.584 512 62.584z m232.022 584.767c0 24.81-20.876 45.112-46.4 45.112H326.377c-25.523 0-46.4-20.301-46.4-45.112l0.213-222.877 226.25 119.983a11.907 11.907 0 0 0 11.12 0l226.462-120.096v222.99z m-231.91-145.259L280.216 376.237c0.225-24.624 20.788-44.7 46.162-44.7h371.246c25.336 0 46.1 20.001 46.4 44.575l-231.91 125.98z" p-id="2564"></path></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-053f8ba1 data-v-941187e6><span class="container" data-v-941187e6><span class="top" data-v-941187e6></span><span class="middle" data-v-941187e6></span><span class="bottom" data-v-941187e6></span></span></button></div></div></div></div><div class="divider" data-v-053f8ba1><div class="divider-line" data-v-053f8ba1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-a0352b35 data-v-c494b248><div class="container" data-v-c494b248><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-c494b248><span class="vpi-align-left menu-icon" data-v-c494b248></span><span class="menu-text" data-v-c494b248>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-c494b248 data-v-1e93ee68><button data-v-1e93ee68>返回顶部</button><!----></div></div></div><aside class="VPSidebar" data-v-a0352b35 data-v-5e226769><div class="curtain" data-v-5e226769></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-5e226769><span class="visually-hidden" id="sidebar-aria-label" data-v-5e226769> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-171d2a46><section class="VPSidebarItem level-0 collapsible has-active" data-v-171d2a46 data-v-7b4f1506><div class="item" role="button" tabindex="0" data-v-7b4f1506><div class="indicator" data-v-7b4f1506></div><h2 class="text" data-v-7b4f1506>基础组件</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-7b4f1506><span class="vpi-chevron-right caret-icon" data-v-7b4f1506></span></div></div><div class="items" data-v-7b4f1506><!--[--><div class="VPSidebarItem level-1 is-link" data-v-7b4f1506 data-v-7b4f1506><div class="item" data-v-7b4f1506><div class="indicator" data-v-7b4f1506></div><a class="VPLink link link" href="/ys-ui-docs/component/YsPagination/YsPagination.html" data-v-7b4f1506><!--[--><p class="text" data-v-7b4f1506>翻页</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-7b4f1506 data-v-7b4f1506><div class="item" data-v-7b4f1506><div class="indicator" data-v-7b4f1506></div><a class="VPLink link link" href="/ys-ui-docs/component/YsSvgIcon/YsSvgIcon.html" data-v-7b4f1506><!--[--><p class="text" data-v-7b4f1506>ICON</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-7b4f1506 data-v-7b4f1506><div class="item" data-v-7b4f1506><div class="indicator" data-v-7b4f1506></div><a class="VPLink link link" href="/ys-ui-docs/component/YsTable/YsTable.html" data-v-7b4f1506><!--[--><p class="text" data-v-7b4f1506>表格Table</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-7b4f1506 data-v-7b4f1506><div class="item" data-v-7b4f1506><div class="indicator" data-v-7b4f1506></div><a class="VPLink link link" href="/ys-ui-docs/component/YsForm/YsForm.html" data-v-7b4f1506><!--[--><p class="text" data-v-7b4f1506>表单form</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-7b4f1506 data-v-7b4f1506><div class="item" data-v-7b4f1506><div class="indicator" data-v-7b4f1506></div><a class="VPLink link link" href="/ys-ui-docs/component/YsMdEditor/YsMdEditor.html" data-v-7b4f1506><!--[--><p class="text" data-v-7b4f1506>Markdown编辑器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-7b4f1506 data-v-7b4f1506><div class="item" data-v-7b4f1506><div class="indicator" data-v-7b4f1506></div><a class="VPLink link link" href="/ys-ui-docs/component/YsEllipsis/YsEllipsis.html" data-v-7b4f1506><!--[--><p class="text" data-v-7b4f1506>文本省略</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-171d2a46><section class="VPSidebarItem level-0 collapsible" data-v-171d2a46 data-v-7b4f1506><div class="item" role="button" tabindex="0" data-v-7b4f1506><div class="indicator" data-v-7b4f1506></div><h2 class="text" data-v-7b4f1506>模板</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-7b4f1506><span class="vpi-chevron-right caret-icon" data-v-7b4f1506></span></div></div><div class="items" data-v-7b4f1506><!--[--><div class="VPSidebarItem level-1 is-link" data-v-7b4f1506 data-v-7b4f1506><div class="item" data-v-7b4f1506><div class="indicator" data-v-7b4f1506></div><a class="VPLink link link" href="/ys-ui-docs/component/YsTableTemplate/YsTableTemplate.html" data-v-7b4f1506><!--[--><p class="text" data-v-7b4f1506>表格模板</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-a0352b35 data-v-b8ab4df5><div class="VPDoc has-sidebar has-aside" data-v-b8ab4df5 data-v-3f8a4b52><!--[--><!--]--><div class="container" data-v-3f8a4b52><div class="aside" data-v-3f8a4b52><div class="aside-curtain" data-v-3f8a4b52></div><div class="aside-container" data-v-3f8a4b52><div class="aside-content" data-v-3f8a4b52><div class="VPDocAside" data-v-3f8a4b52 data-v-6a6bce12><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-6a6bce12 data-v-75722608><div class="content" data-v-75722608><div class="outline-marker" data-v-75722608></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-75722608>目录</div><ul class="VPDocOutlineItem root" data-v-75722608 data-v-08e44143><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-6a6bce12></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-3f8a4b52><div class="content-container" data-v-3f8a4b52><!--[--><!--]--><main class="main" data-v-3f8a4b52><div style="position:relative;" class="vp-doc _ys-ui-docs_component_YsSvgIcon_YsSvgIcon" data-v-3f8a4b52><div><h1 id="yssvgicon-引入svg图标" tabindex="-1">YsSvgIcon 引入svg图标 <a class="header-anchor" href="#yssvgicon-引入svg图标" aria-label="Permalink to &quot;YsSvgIcon 引入svg图标&quot;">​</a></h1><div class="tip custom-block"><p class="custom-block-title">建议</p><p>建议使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。</p></div><h3 id="unplugin-icons-自动引入" tabindex="-1">unplugin-icons 自动引入 <a class="header-anchor" href="#unplugin-icons-自动引入" aria-label="Permalink to &quot;unplugin-icons 自动引入&quot;">​</a></h3><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> unplugin-icons</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> unplugin-auto-import</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div><blockquote><p>vite.config.ts</p></blockquote><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  AutoImport</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    resolvers: [</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      ...</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">IconsResolver</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        prefix: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Icon&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      })</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }),</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  Components</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    resolvers: [</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      ...</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">IconsResolver</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        enabledCollections: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ep&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      })</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }),</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  Icons</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    autoInstall: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    compiler: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;vue3&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  })</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre></div><p>使用方式 <a href="https://icon-sets.iconify.design/ep/credit-card/" target="_blank" rel="noreferrer">icon文档链接地址</a></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i-ep-credit-card</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><h3 id="使用本地的-svg文件" tabindex="-1">使用本地的 svg文件 <a class="header-anchor" href="#使用本地的-svg文件" aria-label="Permalink to &quot;使用本地的 svg文件&quot;">​</a></h3><ol><li>这里使用vite-plugin-svg-icons插件完成，首先在项目根目录安装插件</li></ol><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vite-plugin-svg-icons</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div><ol start="2"><li>main.ts/main.js引入</li></ol><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;virtual:svg-icons-register&#39;</span></span></code></pre></div><ol start="3"><li>vite.config.ts/vite.config.js配置plugins</li></ol><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { defineConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vite&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> vue </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@vitejs/plugin-vue&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;path&#39;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createSvgIconsPlugin } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vite-plugin-svg-icons&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">dir</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">join</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(__dirname, dir)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  plugins: [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    vue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(),</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    createSvgIconsPlugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // 指定需要缓存的图标文件夹</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      iconDirs: [path.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(process.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cwd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;src/assets/icons&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)],</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // 指定symbolId格式</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      symbolId: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ys-icon-[name]&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    })</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><ol start="4"><li>配置svg图片文件夹，把.svg图片放到<code>src/assets/icons</code>目录</li></ol><h3 id="props属性" tabindex="-1">props属性 <a class="header-anchor" href="#props属性" aria-label="Permalink to &quot;props属性&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性名</th><th>说明</th><th>类型</th><th>可选参数</th><th>是否必传</th></tr></thead><tbody><tr><td>iconClass</td><td>svg名称，不加.svg后缀</td><td>string</td><td>--</td><td>是</td></tr><tr><td>color</td><td>fill颜色</td><td>string</td><td>--</td><td></td></tr></tbody></table><h3 id="示例" tabindex="-1">示例 <a class="header-anchor" href="#示例" aria-label="Permalink to &quot;示例&quot;">​</a></h3><hr><h4 id="本地文件引入-ys-svg-icon" tabindex="-1">本地文件引入 ys-svg-icon <a class="header-anchor" href="#本地文件引入-ys-svg-icon" aria-label="Permalink to &quot;本地文件引入 ys-svg-icon&quot;">​</a></h4><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ys-svg-icon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;svg名称&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">#409</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">EFF</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><h4 id="unplugin-icons-自动引入-1" tabindex="-1">unplugin-icons 自动引入 <a class="header-anchor" href="#unplugin-icons-自动引入-1" aria-label="Permalink to &quot;unplugin-icons 自动引入&quot;">​</a></h4><!----></div></div></main><footer class="VPDocFooter" data-v-3f8a4b52 data-v-96335b3f><!--[--><!--]--><div class="edit-info" data-v-96335b3f><!----><div class="last-updated" data-v-96335b3f><p class="VPLastUpdated" data-v-96335b3f data-v-4140b42f>上次更新: <time datetime="2024-09-03T17:50:28.000Z" data-v-4140b42f></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-96335b3f><span class="visually-hidden" id="doc-footer-aria-label" data-v-96335b3f>Pager</span><div class="pager" data-v-96335b3f><a class="VPLink link pager-link prev" href="/ys-ui-docs/component/YsPagination/YsPagination.html" data-v-96335b3f><!--[--><span class="desc" data-v-96335b3f>上一页</span><span class="title" data-v-96335b3f>翻页</span><!--]--></a></div><div class="pager" data-v-96335b3f><a class="VPLink link pager-link next" href="/ys-ui-docs/component/YsTable/YsTable.html" data-v-96335b3f><!--[--><span class="desc" data-v-96335b3f>下一页</span><span class="title" data-v-96335b3f>表格Table</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-a0352b35 data-v-5629685f><div class="container" data-v-5629685f><p class="message" data-v-5629685f>Copyright © 2013 by Elements Consulting Co.,</p><p class="copyright" data-v-5629685f>Ltd.All Right Reserved</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"component_ysellipsis_ysellipsis.md\":\"DXdgRfcZ\",\"component_ysform_ysform.md\":\"BlFG_7zh\",\"component_ysmdeditor_ysmdeditor.md\":\"DX_WBAt7\",\"component_yspagination_yspagination.md\":\"LUSW6Jqk\",\"component_yssvgicon_yssvgicon.md\":\"DaTqiJvi\",\"component_ystable_ystable.md\":\"DItQITG3\",\"component_ystabletemplate_ystabletemplate.md\":\"BryJMO8H\",\"guide_changelog.md\":\"BZRpJUPr\",\"guide_dev-guide.md\":\"D3-3_X_W\",\"guide_installation.md\":\"CKd5XUkI\",\"guide_plan.md\":\"DWfABxk9\",\"guide_quickstart.md\":\"CfQJGzyl\",\"index.md\":\"9P2-rnKr\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-cn\",\"dir\":\"ltr\",\"title\":\"YS-UI组件库\",\"description\":\"一个基于element-plus二次开发的组件库\",\"base\":\"/ys-ui-docs/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"YS-UI\",\"logo\":\"/icon/logo.svg\",\"lang\":\"zh-CN\",\"lastUpdatedText\":\"上次更新\",\"returnToTopLabel\":\"返回顶部\",\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"outline\":{\"level\":\"deep\",\"label\":\"目录\"},\"search\":{\"provider\":\"local\",\"options\":{\"locales\":{\"root\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"noResultsText\":\"无法找到相关结果\",\"resetButtonTitle\":\"清除查询条件\",\"footer\":{\"selectText\":\"选择\",\"closeText\":\"关闭\",\"navigateText\":\"切换\"}}}}}}},\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/installation\"},{\"text\":\"组件\",\"link\":\"/component/YsPagination/YsPagination\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/zhaoxianzhao/ys-ui-docs\"},{\"icon\":{\"svg\":\"<svg t=\\\"1689921738475\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"2563\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 62.584C263.8 62.584 62.584 263.8 62.584 512S263.8 961.416 512 961.416 961.416 760.2 961.416 512 760.2 62.584 512 62.584z m232.022 584.767c0 24.81-20.876 45.112-46.4 45.112H326.377c-25.523 0-46.4-20.301-46.4-45.112l0.213-222.877 226.25 119.983a11.907 11.907 0 0 0 11.12 0l226.462-120.096v222.99z m-231.91-145.259L280.216 376.237c0.225-24.624 20.788-44.7 46.162-44.7h371.246c25.336 0 46.1 20.001 46.4 44.575l-231.91 125.98z\\\" p-id=\\\"2564\\\"></path></svg>\"},\"link\":\"mailto:zhaoxianchao@elements.org.cn\",\"ariaLabel\":\"邮箱\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"基础\",\"items\":[{\"text\":\"安装\",\"link\":\"/guide/installation\"},{\"text\":\"快速开始\",\"link\":\"/guide/quickstart\"}]},{\"text\":\"开发\",\"collapsed\":false,\"items\":[{\"text\":\"开发指南\",\"link\":\"/guide/dev-guide\"},{\"text\":\"开发计划\",\"link\":\"/guide/plan\"}]},{\"text\":\"更新日志\",\"collapsed\":false,\"items\":[{\"text\":\"日志\",\"link\":\"/guide/changelog\"}]}],\"/component/\":[{\"text\":\"基础组件\",\"collapsed\":false,\"items\":[{\"text\":\"翻页\",\"link\":\"/component/YsPagination/YsPagination\"},{\"text\":\"ICON\",\"link\":\"/component/YsSvgIcon/YsSvgIcon\"},{\"text\":\"表格Table\",\"link\":\"/component/YsTable/YsTable\"},{\"text\":\"表单form\",\"link\":\"/component/YsForm/YsForm\"},{\"text\":\"Markdown编辑器\",\"link\":\"/component/YsMdEditor/YsMdEditor\"},{\"text\":\"文本省略\",\"link\":\"/component/YsEllipsis/YsEllipsis\"}]},{\"text\":\"模板\",\"collapsed\":false,\"items\":[{\"text\":\"表格模板\",\"link\":\"/component/YsTableTemplate/YsTableTemplate\"}]}]},\"footer\":{\"message\":\"Copyright © 2013 by Elements Consulting Co.,\",\"copyright\":\"Ltd.All Right Reserved\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>